<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>需求管理 - 一体化作战平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066cc',
                        secondary: '#0099cc',
                        success: '#009966',
                        warning: '#ff9900',
                        danger: '#cc3300',
                        neutral: {
                            100: '#f5f7fa',
                            200: '#e4e7ed',
                            300: '#c0c4cc',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1f2937',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
                        'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
        }
    </style>
    
    <style>
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }
        
        /* 进度节点样式 */
        .progress-node {
            position: relative;
        }
        
        /* 需求卡片悬停效果 */
        .requirement-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        /* Tab标签样式 */
        .requirement-tab {
            transition: all 0.3s ease;
        }
        .requirement-tab.active {
            font-weight: 600;
        }
        .requirement-tab:hover {
            background-color: rgba(0, 102, 204, 0.05);
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-600 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50">
        <div class="flex items-center justify-between px-4 py-3">
            <!-- Logo和标题 -->
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-primary rounded-md flex items-center justify-center text-white">
                    <i class="fa fa-bank text-xl"></i>
                </div>
                <h1 class="text-xl font-bold text-neutral-700 hidden md:block">一体化作战平台</h1>
                <h1 class="text-lg font-bold text-neutral-700 md:hidden">研发交付平台</h1>
            </div>
            
            <!-- 搜索框 -->
            <div class="hidden md:flex relative flex-1 max-w-md mx-4">
                <input type="text" placeholder="搜索任务..." 
                    class="w-full pl-10 pr-4 py-2 rounded-md border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
            </div>
            
            <!-- 右侧用户区域 -->
            <div class="flex items-center space-x-1 md:space-x-4">
                <!-- 通知按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300">
                    <i class="fa fa-bell-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
                </button>
                
                <!-- 消息按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300 hidden md:block">
                    <i class="fa fa-envelope-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-primary rounded-full"></span>
                </button>
                
                <!-- 用户头像 -->
                <div class="flex items-center space-x-2 ml-2">
                    <div class="w-8 h-8 bg-neutral-200 rounded-full overflow-hidden">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    <span class="hidden md:block text-sm font-medium text-neutral-700">张三</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="flex pt-16 flex-1">
        <!-- 左侧导航菜单 -->
        <aside class="w-16 md:w-64 bg-white shadow-sm fixed h-full left-0 top-16 overflow-y-auto scrollbar-hide transform md:transform-none transition-transform duration-300 z-40 -translate-x-full md:translate-x-0">
            <nav class="py-4">
                <ul>
                    <!-- 主导航项 -->
                    <li class="mb-1">
                        <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-tachometer text-lg"></i>
                            <span class="hidden md:block">首页</span>
                        </a>
                    </li>
                    
                    <!-- 交付流程模块 -->
                    <li class="mb-1">
                        <a href="business_strategy.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-line-chart text-lg"></i>
                            <span class="hidden md:block">业务战略</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="architecture-management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-sitemap text-lg"></i>
                            <span class="hidden md:block">架构管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="requirementsManagement.html" class="flex items-center space-x-3 px-4 py-3 text-primary bg-primary/5 border-r-4 border-primary">
                            <i class="fa fa-list-alt text-lg"></i>
                            <span class="hidden md:block font-medium">需求管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="design-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="design_management.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-paint-brush text-lg"></i>
                                    <span class="hidden md:block">设计管理</span>
                                </a>
                                <button id="design-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="design-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="interface_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-plug text-sm"></i>
                                        <span class="hidden md:block">接口管理</span>
                                    </a>
                                    <a href="model_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cubes text-sm"></i>
                                        <span class="hidden md:block">模型管理</span>
                                    </a>
                                    <a href="data_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-database text-sm"></i>
                                        <span class="hidden md:block">字典管理</span>
                                    </a>
                                    <a href="ui_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-desktop text-sm"></i>
                                        <span class="hidden md:block">差异分析</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="schedule_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-calendar text-lg"></i>
                            <span class="hidden md:block">排期管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="developmentMage.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-code text-lg"></i>
                            <span class="hidden md:block">开发管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="test-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="testManagement.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-bug text-lg"></i>
                                    <span class="hidden md:block">测试管理</span>
                                </a>
                                <button id="test-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="test-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="test_cases.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-file-text-o text-sm"></i>
                                        <span class="hidden md:block">测试案例</span>
                                    </a>
                                    <a href="test_plans.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-calendar-check-o text-sm"></i>
                                        <span class="hidden md:block">测试计划</span>
                                    </a>
                                    <a href="test_reports.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-bar-chart text-sm"></i>
                                        <span class="hidden md:block">测试报告</span>
                                    </a>
                                    <a href="test_global_settings.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cogs text-sm"></i>
                                        <span class="hidden md:block">全局设置</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="production_workflow.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-rocket text-lg"></i>
                            <span class="hidden md:block">投产上线</span>
                        </a>
                    </li>
                    
                    <!-- 新增的三个子菜单项 -->
                    <li class="mb-1">
                        <a href="quality_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-check-circle text-lg"></i>
                            <span class="hidden md:block">质量管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="security_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-shield text-lg"></i>
                            <span class="hidden md:block">安全管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="efficiency_metrics.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-bar-chart text-lg"></i>
                            <span class="hidden md:block">效能度量</span>
                        </a>
                    </li>
                    
                    <!-- 分隔线 -->
                    <li class="my-2">
                        <div class="border-t border-neutral-200 mx-4"></div>
                    </li>
                    
                    <!-- 公共模块 -->
                    <li class="mb-1">
                        <a href="teamManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-users text-lg"></i>
                            <span class="hidden md:block">团队管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="settings.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-cog text-lg"></i>
                            <span class="hidden md:block">设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 ml-16 md:ml-64 p-6">
            <!-- 页面标题和操作按钮 -->
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
                <div>
                    <h2 class="text-2xl font-bold text-neutral-700 mb-1">需求管理</h2>
                    <p class="text-neutral-400 text-sm">管理和跟踪所有项目需求</p>
                </div>
                <div class="mt-4 md:mt-0">
                    <button id="create-requirement-btn" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-all-300 flex items-center space-x-2">
                        <i class="fa fa-plus"></i>
                        <span>创建需求</span>
                    </button>
                </div>
            </div>

            <!-- 需求池管理 -->
            <div class="bg-white rounded-lg shadow-card p-6 mb-6">
                <h3 class="text-lg font-semibold text-neutral-700 mb-4">需求池管理</h3>
                
                <!-- 筛选条件 -->
                <div class="mb-4 flex flex-col md:flex-row gap-4">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 flex-1">
                        <div>
                            <label class="block text-sm text-neutral-500 mb-1">需求类型</label>
                            <select class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                <option value="">全部</option>
                                <option value="feature">功能需求</option>
                                <option value="performance">性能需求</option>
                                <option value="security">安全需求</option>
                                <option value="reliability">可靠性需求</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm text-neutral-500 mb-1">优先级</label>
                            <select class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                <option value="">全部</option>
                                <option value="high">高</option>
                                <option value="medium">中</option>
                                <option value="low">低</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm text-neutral-500 mb-1">需求来源</label>
                            <select class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                <option value="">全部</option>
                                <option value="strategy">来自战略</option>
                                <option value="daily">日常需求</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm text-neutral-500 mb-1">状态</label>
                            <select class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                <option value="">全部</option>
                                <option value="draft">草稿</option>
                                <option value="submitted">已提交</option>
                                <option value="reviewing">评审中</option>
                                <option value="approved">已批准</option>
                                <option value="rejected">已拒绝</option>
                            </select>
                        </div>
                    </div>
                    <div class="relative">
                        <input type="text" placeholder="搜索需求标题或ID" 
                            class="w-full md:w-64 pl-10 pr-4 py-2 rounded-md border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
                    </div>
                </div>
                
                <!-- 需求列表 -->
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-neutral-50 border-b border-neutral-200">
                                <th class="px-4 py-3 text-left text-sm font-semibold text-neutral-600">需求ID</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-neutral-600">需求标题</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-neutral-600">类型</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-neutral-600">优先级</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-neutral-600">需求来源</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-neutral-600">状态</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-neutral-600">创建时间</th>
                                <th class="px-4 py-3 text-left text-sm font-semibold text-neutral-600">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 需求项1 -->
                            <tr class="border-b border-neutral-200 requirement-card cursor-pointer transition-all-300" data-id="REQ-2024-001" data-capability-id="CAP005">
                                <td class="px-4 py-3 text-sm">REQ-2024-001</td>
                                <td class="px-4 py-3 text-sm font-medium">
                                    <div>用户管理系统重构</div>
                                    <div class="text-xs text-neutral-400 mt-1">
                                        <i class="fa fa-link mr-1"></i>关联能力：CAP005 - 需求全生命周期管理能力
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs">功能需求</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-red-100 text-red-600 rounded-full text-xs">高</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">来自战略</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">已批准</span></td>
                                <td class="px-4 py-3 text-sm">2024-07-15</td>
                                <td class="px-4 py-3 text-sm">
                                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                    <button class="text-neutral-500 hover:text-neutral-700">编辑</button>
                                </td>
                            </tr>
                            
                            <!-- 需求项2 -->
                            <tr class="border-b border-neutral-200 requirement-card cursor-pointer transition-all-300" data-id="REQ-2024-002" data-capability-id="CAP006">
                                <td class="px-4 py-3 text-sm">REQ-2024-002</td>
                                <td class="px-4 py-3 text-sm font-medium">
                                    <div>数据安全审计功能</div>
                                    <div class="text-xs text-neutral-400 mt-1">
                                        <i class="fa fa-link mr-1"></i>关联能力：CAP006 - 解决方案设计能力
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-purple-100 text-purple-600 rounded-full text-xs">安全需求</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-red-100 text-red-600 rounded-full text-xs">高</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">来自战略</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs">评审中</span></td>
                                <td class="px-4 py-3 text-sm">2024-07-18</td>
                                <td class="px-4 py-3 text-sm">
                                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                    <button class="text-neutral-500 hover:text-neutral-700">编辑</button>
                                </td>
                            </tr>
                            
                            <!-- 需求项3 -->
                            <tr class="border-b border-neutral-200 requirement-card cursor-pointer transition-all-300" data-id="REQ-2024-003">
                                <td class="px-4 py-3 text-sm">REQ-2024-003</td>
                                <td class="px-4 py-3 text-sm font-medium">报表系统性能优化</td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-yellow-100 text-yellow-600 rounded-full text-xs">性能需求</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-yellow-100 text-yellow-600 rounded-full text-xs">中</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-neutral-100 text-neutral-600 rounded-full text-xs">日常需求</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">已批准</span></td>
                                <td class="px-4 py-3 text-sm">2024-07-20</td>
                                <td class="px-4 py-3 text-sm">
                                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                    <button class="text-neutral-500 hover:text-neutral-700">编辑</button>
                                </td>
                            </tr>
                            
                            <!-- 需求项4 -->
                            <tr class="border-b border-neutral-200 requirement-card cursor-pointer transition-all-300" data-id="REQ-2024-004">
                                <td class="px-4 py-3 text-sm">REQ-2024-004</td>
                                <td class="px-4 py-3 text-sm font-medium">移动端适配优化</td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs">功能需求</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">低</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-neutral-100 text-neutral-600 rounded-full text-xs">日常需求</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">已提交</span></td>
                                <td class="px-4 py-3 text-sm">2024-07-22</td>
                                <td class="px-4 py-3 text-sm">
                                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                    <button class="text-neutral-500 hover:text-neutral-700">编辑</button>
                                </td>
                            </tr>
                            
                            <!-- 需求项5 -->
                            <tr class="requirement-card cursor-pointer transition-all-300" data-id="REQ-2024-005">
                                <td class="px-4 py-3 text-sm">REQ-2024-005</td>
                                <td class="px-4 py-3 text-sm font-medium">系统容灾备份方案</td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">可靠性需求</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-red-100 text-red-600 rounded-full text-xs">高</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-neutral-100 text-neutral-600 rounded-full text-xs">日常需求</span></td>
                                <td class="px-4 py-3 text-sm"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">已批准</span></td>
                                <td class="px-4 py-3 text-sm">2024-07-25</td>
                                <td class="px-4 py-3 text-sm">
                                    <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                    <button class="text-neutral-500 hover:text-neutral-700">编辑</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div class="flex justify-between items-center mt-6">
                    <div class="text-sm text-neutral-500">
                        显示 1-5 条，共 24 条
                    </div>
                    <div class="flex space-x-1">
                        <button class="w-8 h-8 flex items-center justify-center border border-neutral-200 rounded-md text-neutral-500 hover:bg-neutral-50">
                            <i class="fa fa-angle-left"></i>
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center border border-primary bg-primary text-white rounded-md">1</button>
                        <button class="w-8 h-8 flex items-center justify-center border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50">2</button>
                        <button class="w-8 h-8 flex items-center justify-center border border-neutral-200 rounded-md text-neutral-600 hover:bg-neutral-50">3</button>
                        <button class="w-8 h-8 flex items-center justify-center border border-neutral-200 rounded-md text-neutral-500 hover:bg-neutral-50">
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 需求详情弹窗 -->
    <div id="requirement-modal-overlay" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
        <div id="requirement-modal" class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">
            <!-- 弹窗头部 -->
            <div class="bg-primary text-white px-6 py-4 flex items-center justify-between">
                <h2 class="text-xl font-bold" id="modal-requirement-title">需求详情</h2>
                <button id="close-requirement-modal" class="text-white hover:text-gray-200 focus:outline-none">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- 需求整体进度可视化 -->
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium mb-3">需求整体进度</h3>
                <div class="relative">
                    <!-- 进度条背景 -->
                    <div class="absolute top-1/2 left-0 w-full h-0.5 bg-gray-200 -translate-y-1/2"></div>
                    
                    <!-- 节点和连接线 -->
                    <div class="flex justify-between relative z-10">
                        <!-- 解决方案节点 - 进行中 -->
                        <div class="flex flex-col items-center progress-node">
                            <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center border-2 border-primary">
                                <i class="fa fa-lightbulb-o"></i>
                            </div>
                            <span class="text-xs mt-2 text-primary font-medium">解决方案</span>
                            <span class="text-xs mt-1 text-green-600">进行中</span>
                        </div>
                        
                        <!-- 应用设计节点 - 未开始 -->
                        <div class="flex flex-col items-center progress-node">
                            <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center border-2 border-gray-300">
                                <i class="fa fa-pencil"></i>
                            </div>
                            <span class="text-xs mt-2 text-gray-500">应用设计</span>
                            <span class="text-xs mt-1 text-gray-500">未开始</span>
                        </div>
                        
                        <!-- 开发编码节点 - 未开始 -->
                        <div class="flex flex-col items-center progress-node">
                            <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center border-2 border-gray-300">
                                <i class="fa fa-code"></i>
                            </div>
                            <span class="text-xs mt-2 text-gray-500">开发编码</span>
                            <span class="text-xs mt-1 text-gray-500">未开始</span>
                        </div>
                        
                        <!-- 测试节点 - 未开始 -->
                        <div class="flex flex-col items-center progress-node">
                            <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center border-2 border-gray-300">
                                <i class="fa fa-check-circle"></i>
                            </div>
                            <span class="text-xs mt-2 text-gray-500">测试</span>
                            <span class="text-xs mt-1 text-gray-500">未开始</span>
                        </div>
                        
                        <!-- 投产节点 - 未开始 -->
                        <div class="flex flex-col items-center progress-node">
                            <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center border-2 border-gray-300">
                                <i class="fa fa-rocket"></i>
                            </div>
                            <span class="text-xs mt-2 text-gray-500">投产</span>
                            <span class="text-xs mt-1 text-gray-500">未开始</span>
                        </div>
                    </div>
                    <!-- 进度指示器 -->
                    <div class="absolute top-1/2 left-0 w-1/5 h-0.5 bg-primary -translate-y-1/2"></div>
                </div>
            </div>
            
            <!-- 需求详情内容 -->
            <div class="flex-1 p-6 overflow-y-auto">
                <div class="mb-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">需求ID</p>
                            <p class="text-sm font-medium" id="modal-requirement-id">REQ-2024-001</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">需求标题</p>
                            <p class="text-sm font-medium" id="modal-requirement-name">用户管理系统重构</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">需求类型</p>
                            <p class="text-sm font-medium" id="modal-requirement-type">功能需求</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">优先级</p>
                            <p class="text-sm font-medium" id="modal-requirement-priority">高</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">需求来源</p>
                            <p class="text-sm font-medium" id="modal-requirement-source">来自战略</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">状态</p>
                            <p class="text-sm font-medium" id="modal-requirement-status">已批准</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">创建时间</p>
                            <p class="text-sm font-medium" id="modal-requirement-date">2024-07-15</p>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-1">需求描述</p>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm" id="modal-requirement-description">重构现有用户管理系统，优化性能并增加新功能，包括用户权限精细化控制、多因素认证等。系统需要支持百万级用户并发访问，并提供良好的用户体验。</p>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-1">战略能力关联</p>
                        <div class="p-3 bg-blue-50 rounded-lg border border-blue-100" id="modal-capability-info">
                            <div class="flex items-start space-x-3">
                                <div class="flex-shrink-0">
                                    <i class="fa fa-link text-primary text-lg"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="flex items-center space-x-2 mb-2">
                                        <span class="text-sm font-semibold text-primary" id="modal-capability-id">CAP005</span>
                                        <span class="text-sm font-medium text-neutral-700" id="modal-capability-name">需求全生命周期管理能力</span>
                                    </div>
                                    <p class="text-xs text-neutral-600 mb-2" id="modal-capability-description">
                                        该能力需求旨在建立完整的需求管理流程，从需求收集、分析、设计到实现、测试和上线的全生命周期管理能力，确保需求能够高效、准确地转化为产品功能。
                                    </p>
                                    <div class="flex items-center space-x-4 text-xs text-neutral-500">
                                        <div>
                                            <i class="fa fa-sitemap mr-1"></i>
                                            <span>业务举措：INI002 - 建立战略到交付的端到端流程</span>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <a href="business_strategy.html" class="text-primary hover:text-primary/80 text-xs">
                                            <i class="fa fa-external-link mr-1"></i>查看完整战略信息
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-1">业务背景</p>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm" id="modal-requirement-background">随着业务快速发展，现有用户管理系统已无法满足业务需求，存在性能瓶颈和功能缺失的问题。为提升用户体验，保障系统安全，并支持未来业务扩展，需要对用户管理系统进行全面重构。</p>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-1">预期目标</p>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <ul class="text-sm list-disc pl-5 space-y-1" id="modal-requirement-goals">
                                <li>性能提升：系统响应时间缩短50%，支持百万级用户并发访问</li>
                                <li>功能增强：增加用户权限精细化控制、多因素认证、单点登录等功能</li>
                                <li>安全加固：符合等保三级要求，防止常见的安全漏洞</li>
                                <li>可扩展性：支持微服务架构，便于未来功能扩展</li>
                                <li>用户体验：优化操作流程，提升用户满意度</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-1">相关模型变更清单</p>
                        <div class="overflow-x-auto">
                            <table class="min-w-full text-sm">
                                <thead>
                                    <tr class="bg-gray-50 border-b border-gray-200">
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模型类型</th>
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模型名称</th>
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">变更内容</th>
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-3 py-2 text-sm">数据模型</td>
                                        <td class="px-3 py-2 text-sm font-medium">用户表(Users)</td>
                                        <td class="px-3 py-2 text-sm">增加多因素认证字段</td>
                                        <td class="px-3 py-2 text-sm"><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">已完成</span></td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 text-sm">数据模型</td>
                                        <td class="px-3 py-2 text-sm font-medium">权限表(Roles)</td>
                                        <td class="px-3 py-2 text-sm">重构权限体系，支持精细化控制</td>
                                        <td class="px-3 py-2 text-sm"><span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs">进行中</span></td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2 text-sm">接口模型</td>
                                        <td class="px-3 py-2 text-sm font-medium">用户管理API</td>
                                        <td class="px-3 py-2 text-sm">更新用户信息接口版本</td>
                                        <td class="px-3 py-2 text-sm"><span class="px-2 py-1 bg-yellow-100 text-yellow-600 rounded-full text-xs">待处理</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="mb-2">
                            <a href="baa_solution_process_selection_tab.html" class="text-primary hover:text-primary/80 text-sm">
                                <i class="fa fa-eye mr-1"></i> 查看解决方案整体信息
                            </a>
                        </div>
                    <div class="mb-2">
                            <a>
                                <i class="fa fa-eye mr-1"></i> 特性条目
                            </a>
                        </div>
                </div>
            </div>
            
            <!-- 底部按钮 -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button id="close-modal-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm hover:bg-gray-50">
                    关闭
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-md text-sm hover:bg-primary/90">
                    编辑需求
                </button>
            </div>
        </div>
    </div>

    <!-- 创建需求弹窗 -->
    <div id="create-requirement-modal-overlay" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
        <div id="create-requirement-modal" class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">
            <!-- 弹窗头部 -->
            <div class="bg-primary text-white px-6 py-4 flex items-center justify-between">
                <h2 class="text-xl font-bold">创建需求</h2>
                <button id="close-create-modal" class="text-white hover:text-gray-200 focus:outline-none">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- Tab标签页导航 -->
            <div class="border-b border-gray-200">
                <div class="flex px-6">
                    <button id="tab-headquarters" class="requirement-tab active px-4 py-3 text-sm font-medium border-b-2 border-primary text-primary transition-all">
                        <i class="fa fa-building mr-1"></i> 总行业务需求
                    </button>
                    <button id="tab-branch" class="requirement-tab px-4 py-3 text-sm font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-800 transition-all">
                        <i class="fa fa-bank mr-1"></i> 分行业务需求
                    </button>
                    <button id="tab-internal" class="requirement-tab px-4 py-3 text-sm font-medium border-b-2 border-transparent text-gray-600 hover:text-gray-800 transition-all">
                        <i class="fa fa-users mr-1"></i> 内部需求
                    </button>
                </div>
            </div>
            
            <!-- 需求表单内容 -->
            <div class="flex-1 overflow-y-auto">
                <!-- 总行业务需求Tab内容 -->
                <div id="content-headquarters" class="tab-content p-6">
                    <form id="form-headquarters" class="requirement-form">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- 需求编号 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-hashtag text-primary mr-1"></i> 需求编号 <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="req_number" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="系统自动生成" readonly>
                            </div>
                            
                            <!-- 需求名称 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-tag text-primary mr-1"></i> 需求名称 <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="req_name" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入需求名称" required>
                            </div>
                            
                            <!-- 需求类型 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-list-alt text-primary mr-1"></i> 需求类型 <span class="text-danger">*</span>
                                </label>
                                <select name="req_type" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                                    <option value="">请选择</option>
                                    <option value="常规业务需求">常规业务需求</option>
                                    <option value="数据变更">数据变更</option>
                                    <option value="取数">取数</option>
                                </select>
                            </div>
                            
                            <!-- 所属需求池 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-inbox text-primary mr-1"></i> 所属需求池
                                </label>
                                <select name="req_pool" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <option value="">请选择</option>
                                    <option value="总行需求池A">总行需求池A</option>
                                    <option value="总行需求池B">总行需求池B</option>
                                    <option value="总行需求池C">总行需求池C</option>
                                </select>
                            </div>
                            
                            <!-- 所属业务规则 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-gavel text-primary mr-1"></i> 所属业务规则
                                </label>
                                <input type="text" name="business_rule" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入所属业务规则">
                            </div>
                            
                            <!-- 需求特殊标识 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-flag text-primary mr-1"></i> 需求特殊标识
                                </label>
                                <input type="text" name="special_flag" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="如：紧急、监管要求等">
                            </div>
                            
                            <!-- 期望上线时间 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-calendar-check-o text-primary mr-1"></i> 期望上线时间 <span class="text-danger">*</span>
                                </label>
                                <input type="date" name="expected_online_time" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                            </div>
                            
                            <!-- 计划提出需求时间 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-calendar text-primary mr-1"></i> 计划提出需求时间
                                </label>
                                <input type="date" name="planned_submit_time" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            </div>
                            
                            <!-- 优先级 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-exclamation-circle text-primary mr-1"></i> 优先级 <span class="text-danger">*</span>
                                </label>
                                <select name="priority" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                                    <option value="">请选择</option>
                                    <option value="高">高</option>
                                    <option value="中">中</option>
                                    <option value="低">低</option>
                                </select>
                            </div>
                            
                            <!-- 优先级说明 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-info-circle text-primary mr-1"></i> 优先级说明
                                </label>
                                <input type="text" name="priority_desc" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请说明优先级原因">
                            </div>
                            
                            <!-- 期望用户信息 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-user text-primary mr-1"></i> 期望用户信息
                                </label>
                                <input type="text" name="expected_user" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入期望使用该功能的用户信息">
                            </div>
                            
                            <!-- 客户类型 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-users text-primary mr-1"></i> 客户类型
                                </label>
                                <select name="customer_type" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <option value="">请选择</option>
                                    <option value="对公客户">对公客户</option>
                                    <option value="对私客户">对私客户</option>
                                    <option value="全部客户">全部客户</option>
                                </select>
                            </div>
                            
                            <!-- 需求详细信息 -->
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-align-left text-primary mr-1"></i> 需求详细信息 <span class="text-danger">*</span>
                                </label>
                                <textarea name="req_detail" rows="4" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请详细描述需求内容，包括功能、业务流程、用户场景等" required></textarea>
                            </div>
                            
                            <!-- 需求价值 -->
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-line-chart text-primary mr-1"></i> 需求价值（含量化信息）
                                </label>
                                <textarea name="req_value" rows="3" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请描述需求价值，如提升效率XX%、降低成本XX元、增加收入XX元等量化指标"></textarea>
                            </div>
                            
                            <!-- 附件上传 -->
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-paperclip text-primary mr-1"></i> 附件（业务方案、监管文件、市场调研等）
                                </label>
                                <div class="border-2 border-dashed border-neutral-200 rounded-md p-4 text-center hover:border-primary/50 transition-all cursor-pointer">
                                    <i class="fa fa-cloud-upload text-3xl text-neutral-400 mb-2"></i>
                                    <p class="text-sm text-neutral-500 mb-1">点击或拖拽文件到此处上传</p>
                                    <p class="text-xs text-neutral-400">支持 PDF, Word, Excel, PPT 等格式，单个文件不超过10MB</p>
                                    <input type="file" name="attachment" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                
                <!-- 分行业务需求Tab内容 -->
                <div id="content-branch" class="tab-content hidden p-6">
                    <!-- 分行类型选择 -->
                    <div class="mb-6 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-lg border border-blue-200">
                        <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center">
                            <i class="fa fa-filter text-primary mr-2"></i>
                            选择分行类型
                        </h3>
                        <div class="flex flex-wrap gap-4">
                            <label class="flex items-center cursor-pointer group">
                                <input type="radio" name="branch_type" value="A" class="branch-type-radio w-4 h-4 text-primary focus:ring-primary" checked>
                                <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
                                    <i class="fa fa-building-o mr-1"></i>分行A类
                                </span>
                            </label>
                            <label class="flex items-center cursor-pointer group">
                                <input type="radio" name="branch_type" value="B" class="branch-type-radio w-4 h-4 text-primary focus:ring-primary">
                                <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
                                    <i class="fa fa-building mr-1"></i>分行B类
                                </span>
                            </label>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">
                            <i class="fa fa-info-circle mr-1"></i>
                            A类分行：一线城市分行；B类分行：二三线城市分行
                        </p>
                    </div>
                    
                    <form id="form-branch" class="requirement-form">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- 与总行业务需求相同的字段结构 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-hashtag text-primary mr-1"></i> 需求编号 <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="req_number" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="系统自动生成" readonly>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-tag text-primary mr-1"></i> 需求名称 <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="req_name" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入需求名称" required>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-list-alt text-primary mr-1"></i> 需求类型 <span class="text-danger">*</span>
                                </label>
                                <select name="req_type" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                                    <option value="">请选择</option>
                                    <option value="常规业务需求">常规业务需求</option>
                                    <option value="数据变更">数据变更</option>
                                    <option value="取数">取数</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-inbox text-primary mr-1"></i> 所属需求池
                                </label>
                                <select name="req_pool" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <option value="">请选择</option>
                                    <option value="分行需求池A">分行需求池A</option>
                                    <option value="分行需求池B">分行需求池B</option>
                                    <option value="分行需求池C">分行需求池C</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-gavel text-primary mr-1"></i> 所属业务规则
                                </label>
                                <input type="text" name="business_rule" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入所属业务规则">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-flag text-primary mr-1"></i> 需求特殊标识
                                </label>
                                <input type="text" name="special_flag" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="如：紧急、监管要求等">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-calendar-check-o text-primary mr-1"></i> 期望上线时间 <span class="text-danger">*</span>
                                </label>
                                <input type="date" name="expected_online_time" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-calendar text-primary mr-1"></i> 计划提出需求时间
                                </label>
                                <input type="date" name="planned_submit_time" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-exclamation-circle text-primary mr-1"></i> 优先级 <span class="text-danger">*</span>
                                </label>
                                <select name="priority" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                                    <option value="">请选择</option>
                                    <option value="高">高</option>
                                    <option value="中">中</option>
                                    <option value="低">低</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-info-circle text-primary mr-1"></i> 优先级说明
                                </label>
                                <input type="text" name="priority_desc" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请说明优先级原因">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-user text-primary mr-1"></i> 期望用户信息
                                </label>
                                <input type="text" name="expected_user" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入期望使用该功能的用户信息">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-users text-primary mr-1"></i> 客户类型
                                </label>
                                <select name="customer_type" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <option value="">请选择</option>
                                    <option value="对公客户">对公客户</option>
                                    <option value="对私客户">对私客户</option>
                                    <option value="全部客户">全部客户</option>
                                </select>
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-align-left text-primary mr-1"></i> 需求详细信息 <span class="text-danger">*</span>
                                </label>
                                <textarea name="req_detail" rows="4" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请详细描述需求内容，包括功能、业务流程、用户场景等" required></textarea>
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-line-chart text-primary mr-1"></i> 需求价值（含量化信息）
                                </label>
                                <textarea name="req_value" rows="3" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请描述需求价值，如提升效率XX%、降低成本XX元、增加收入XX元等量化指标"></textarea>
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-paperclip text-primary mr-1"></i> 附件（业务方案、监管文件、市场调研等）
                                </label>
                                <div class="border-2 border-dashed border-neutral-200 rounded-md p-4 text-center hover:border-primary/50 transition-all cursor-pointer">
                                    <i class="fa fa-cloud-upload text-3xl text-neutral-400 mb-2"></i>
                                    <p class="text-sm text-neutral-500 mb-1">点击或拖拽文件到此处上传</p>
                                    <p class="text-xs text-neutral-400">支持 PDF, Word, Excel, PPT 等格式，单个文件不超过10MB</p>
                                    <input type="file" name="attachment" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                
                <!-- 内部需求Tab内容 -->
                <div id="content-internal" class="tab-content hidden p-6">
                    <form id="form-internal" class="requirement-form">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- 与总行业务需求相同的字段结构 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-hashtag text-primary mr-1"></i> 需求编号 <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="req_number" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="系统自动生成" readonly>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-tag text-primary mr-1"></i> 需求名称 <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="req_name" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入需求名称" required>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-list-alt text-primary mr-1"></i> 需求类型 <span class="text-danger">*</span>
                                </label>
                                <select name="req_type" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                                    <option value="">请选择</option>
                                    <option value="常规业务需求">常规业务需求</option>
                                    <option value="数据变更">数据变更</option>
                                    <option value="取数">取数</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-inbox text-primary mr-1"></i> 所属需求池
                                </label>
                                <select name="req_pool" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <option value="">请选择</option>
                                    <option value="内部需求池A">内部需求池A</option>
                                    <option value="内部需求池B">内部需求池B</option>
                                    <option value="内部需求池C">内部需求池C</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-gavel text-primary mr-1"></i> 所属业务规则
                                </label>
                                <input type="text" name="business_rule" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入所属业务规则">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-flag text-primary mr-1"></i> 需求特殊标识
                                </label>
                                <input type="text" name="special_flag" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="如：技术改造、系统升级等">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-calendar-check-o text-primary mr-1"></i> 期望上线时间 <span class="text-danger">*</span>
                                </label>
                                <input type="date" name="expected_online_time" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-calendar text-primary mr-1"></i> 计划提出需求时间
                                </label>
                                <input type="date" name="planned_submit_time" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-exclamation-circle text-primary mr-1"></i> 优先级 <span class="text-danger">*</span>
                                </label>
                                <select name="priority" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                                    <option value="">请选择</option>
                                    <option value="高">高</option>
                                    <option value="中">中</option>
                                    <option value="低">低</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-info-circle text-primary mr-1"></i> 优先级说明
                                </label>
                                <input type="text" name="priority_desc" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请说明优先级原因">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-user text-primary mr-1"></i> 期望用户信息
                                </label>
                                <input type="text" name="expected_user" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入期望使用该功能的用户信息">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-users text-primary mr-1"></i> 客户类型
                                </label>
                                <select name="customer_type" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <option value="">请选择</option>
                                    <option value="内部系统">内部系统</option>
                                    <option value="内部员工">内部员工</option>
                                    <option value="IT运维">IT运维</option>
                                </select>
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-align-left text-primary mr-1"></i> 需求详细信息 <span class="text-danger">*</span>
                                </label>
                                <textarea name="req_detail" rows="4" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请详细描述需求内容，包括功能、业务流程、用户场景等" required></textarea>
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-line-chart text-primary mr-1"></i> 需求价值（含量化信息）
                                </label>
                                <textarea name="req_value" rows="3" class="w-full px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请描述需求价值，如提升效率XX%、降低成本XX元、增加收入XX元等量化指标"></textarea>
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fa fa-paperclip text-primary mr-1"></i> 附件（业务方案、监管文件、市场调研等）
                                </label>
                                <div class="border-2 border-dashed border-neutral-200 rounded-md p-4 text-center hover:border-primary/50 transition-all cursor-pointer">
                                    <i class="fa fa-cloud-upload text-3xl text-neutral-400 mb-2"></i>
                                    <p class="text-sm text-neutral-500 mb-1">点击或拖拽文件到此处上传</p>
                                    <p class="text-xs text-neutral-400">支持 PDF, Word, Excel, PPT 等格式，单个文件不超过10MB</p>
                                    <input type="file" name="attachment" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 底部按钮 -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button id="cancel-create-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm hover:bg-gray-50 transition-all">
                    取消
                </button>
                <button id="submit-create-btn" class="px-4 py-2 bg-primary text-white rounded-md text-sm hover:bg-primary/90 transition-all">
                    <i class="fa fa-check mr-1"></i> 创建需求
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 需求详情弹窗功能
        document.addEventListener('DOMContentLoaded', function() {
            // 设计管理菜单展开/收起功能
            const designMenuToggle = document.getElementById('design-menu-toggle');
            const designSubmenu = document.getElementById('design-submenu');
            const designMenuWrapper = document.querySelector('.design-menu-wrapper');
            
            if (designMenuToggle && designSubmenu) {
                designMenuToggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.querySelector('i').classList.toggle('rotate-90');
                    if (designSubmenu.classList.contains('hidden')) {
                        designSubmenu.classList.remove('hidden');
                        setTimeout(() => {
                            designSubmenu.classList.remove('opacity-0');
                        }, 10);
                    } else {
                        designSubmenu.classList.add('opacity-0');
                        setTimeout(() => {
                            designSubmenu.classList.add('hidden');
                        }, 300);
                    }
                });
                
                // 点击菜单项外部区域收起菜单
                document.addEventListener('click', function(e) {
                    if (!designMenuWrapper.contains(e.target)) {
                        designSubmenu.classList.add('opacity-0');
                        setTimeout(() => {
                            designSubmenu.classList.add('hidden');
                        }, 300);
                        designMenuToggle.querySelector('i').classList.remove('rotate-90');
                    }
                });
            }
            
            // 测试管理菜单展开/收起功能
            const testMenuToggle = document.getElementById('test-menu-toggle');
            const testSubmenu = document.getElementById('test-submenu');
            const testMenuWrapper = document.querySelector('.test-menu-wrapper');
            
            if (testMenuToggle && testSubmenu) {
                testMenuToggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.querySelector('i').classList.toggle('rotate-90');
                    if (testSubmenu.classList.contains('hidden')) {
                        testSubmenu.classList.remove('hidden');
                        setTimeout(() => {
                            testSubmenu.classList.remove('opacity-0');
                        }, 10);
                    } else {
                        testSubmenu.classList.add('opacity-0');
                        setTimeout(() => {
                            testSubmenu.classList.add('hidden');
                        }, 300);
                    }
                });
                
                // 点击菜单项外部区域收起菜单
                document.addEventListener('click', function(e) {
                    if (!testMenuWrapper.contains(e.target)) {
                        testSubmenu.classList.add('opacity-0');
                        setTimeout(() => {
                            testSubmenu.classList.add('hidden');
                        }, 300);
                        testMenuToggle.querySelector('i').classList.remove('rotate-90');
                    }
                });
            }

            // 获取元素
            const requirementCards = document.querySelectorAll('.requirement-card');
            const requirementModalOverlay = document.getElementById('requirement-modal-overlay');
            const requirementModal = document.getElementById('requirement-modal');
            const closeRequirementModal = document.getElementById('close-requirement-modal');
            const closeModalBtn = document.getElementById('close-modal-btn');
            
            const createRequirementBtn = document.getElementById('create-requirement-btn');
            const createRequirementModalOverlay = document.getElementById('create-requirement-modal-overlay');
            const closeCreateModal = document.getElementById('close-create-modal');
            const cancelCreateBtn = document.getElementById('cancel-create-btn');
            const submitCreateBtn = document.getElementById('submit-create-btn');
            
            // 关闭需求详情弹窗
            function hideRequirementModal() {
                requirementModalOverlay.classList.add('hidden');
                document.body.style.overflow = 'auto'; // 恢复背景滚动
            }
            
            // 显示需求详情弹窗
            function showRequirementModal(requirementId) {
                // 根据需求ID加载不同的需求详情
                // 这里简化处理，实际应用中应该从服务器加载数据
                const modalRequirementTitle = document.getElementById('modal-requirement-title');
                const modalRequirementId = document.getElementById('modal-requirement-id');
                const modalRequirementName = document.getElementById('modal-requirement-name');
                const modalRequirementType = document.getElementById('modal-requirement-type');
                const modalRequirementPriority = document.getElementById('modal-requirement-priority');
                const modalRequirementSource = document.getElementById('modal-requirement-source');
                const modalRequirementStatus = document.getElementById('modal-requirement-status');
                const modalRequirementDate = document.getElementById('modal-requirement-date');
                const modalRequirementDescription = document.getElementById('modal-requirement-description');
                const modalRequirementBackground = document.getElementById('modal-requirement-background');
                const modalRequirementGoals = document.getElementById('modal-requirement-goals');
                const modalCapabilityInfo = document.getElementById('modal-capability-info');
                const modalCapabilityId = document.getElementById('modal-capability-id');
                const modalCapabilityName = document.getElementById('modal-capability-name');
                const modalCapabilityDescription = document.getElementById('modal-capability-description');
                
                // 能力需求数据映射
                const capabilityData = {
                    'CAP005': {
                        id: 'CAP005',
                        name: '需求全生命周期管理能力',
                        description: '该能力需求旨在建立完整的需求管理流程，从需求收集、分析、设计到实现、测试和上线的全生命周期管理能力，确保需求能够高效、准确地转化为产品功能。支持需求优先级管理、需求跟踪、需求变更管理等功能。',
                        initiative: 'INI002 - 建立战略到交付的端到端流程'
                    },
                    'CAP006': {
                        id: 'CAP006',
                        name: '解决方案设计能力',
                        description: '该能力需求旨在建立解决方案设计能力，包括业务架构设计、技术架构设计、数据架构设计等，确保解决方案能够满足业务需求，并具有良好的可扩展性和可维护性。支持多层次架构设计、设计评审、设计文档管理等功能。',
                        initiative: 'INI002 - 建立战略到交付的端到端流程'
                    }
                };
                
                // 设置弹窗标题
                modalRequirementTitle.textContent = '需求详情';
                
                // 获取能力需求ID
                const requirementCard = document.querySelector(`[data-id="${requirementId}"]`);
                const capabilityId = requirementCard ? requirementCard.getAttribute('data-capability-id') : null;
                
                // 显示或隐藏战略能力关联信息
                if (capabilityId && capabilityData[capabilityId]) {
                    const capability = capabilityData[capabilityId];
                    modalCapabilityInfo.classList.remove('hidden');
                    modalCapabilityId.textContent = capability.id;
                    modalCapabilityName.textContent = capability.name;
                    modalCapabilityDescription.textContent = capability.description;
                } else {
                    modalCapabilityInfo.classList.add('hidden');
                }
                
                // 根据需求ID设置不同的内容
                if (requirementId === 'REQ-2024-001') {
                    modalRequirementId.textContent = 'REQ-2024-001';
                    modalRequirementName.textContent = '用户管理系统重构';
                    modalRequirementType.textContent = '功能需求';
                    modalRequirementPriority.textContent = '高';
                    modalRequirementSource.textContent = '来自战略';
                    modalRequirementStatus.textContent = '已批准';
                    modalRequirementDate.textContent = '2024-07-15';
                    modalRequirementDescription.textContent = '重构现有用户管理系统，优化性能并增加新功能，包括用户权限精细化控制、多因素认证等。系统需要支持百万级用户并发访问，并提供良好的用户体验。该需求源自业务战略中的"需求全生命周期管理能力"（CAP005）。';
                    modalRequirementBackground.textContent = '随着业务快速发展，现有用户管理系统已无法满足业务需求，存在性能瓶颈和功能缺失的问题。为提升用户体验，保障系统安全，并支持未来业务扩展，需要对用户管理系统进行全面重构。';
                    modalRequirementGoals.innerHTML = `
                        <li>性能提升：系统响应时间缩短50%，支持百万级用户并发访问</li>
                        <li>功能增强：增加用户权限精细化控制、多因素认证、单点登录等功能</li>
                        <li>安全加固：符合等保三级要求，防止常见的安全漏洞</li>
                        <li>可扩展性：支持微服务架构，便于未来功能扩展</li>
                        <li>用户体验：优化操作流程，提升用户满意度</li>
                    `;
                } else if (requirementId === 'REQ-2024-002') {
                    modalRequirementId.textContent = 'REQ-2024-002';
                    modalRequirementName.textContent = '数据安全审计功能';
                    modalRequirementType.textContent = '安全需求';
                    modalRequirementPriority.textContent = '高';
                    modalRequirementSource.textContent = '来自战略';
                    modalRequirementStatus.textContent = '评审中';
                    modalRequirementDate.textContent = '2024-07-18';
                    modalRequirementDescription.textContent = '开发数据安全审计功能，记录所有敏感数据的访问、修改和删除操作，支持审计日志查询、分析和告警功能。该需求源自业务战略中的"解决方案设计能力"（CAP006）。';
                    modalRequirementBackground.textContent = '为满足数据安全法规要求，加强数据安全管理，需要建立完善的数据安全审计机制，对敏感数据的操作进行全面监控和审计。';
                    modalRequirementGoals.innerHTML = `
                        <li>全面审计：记录所有敏感数据的访问、修改和删除操作</li>
                        <li>实时监控：支持实时监控和告警功能</li>
                        <li>合规性：满足相关数据安全法规要求</li>
                        <li>可追溯：支持审计日志的查询、分析和追溯</li>
                    `;
                } else {
                    // 默认显示REQ-2024-001的内容
                    modalRequirementId.textContent = 'REQ-2024-001';
                    modalRequirementName.textContent = '用户管理系统重构';
                    modalRequirementType.textContent = '功能需求';
                    modalRequirementPriority.textContent = '高';
                    modalRequirementSource.textContent = '来自战略';
                    modalRequirementStatus.textContent = '已批准';
                    modalRequirementDate.textContent = '2024-07-15';
                    modalRequirementDescription.textContent = '重构现有用户管理系统，优化性能并增加新功能，包括用户权限精细化控制、多因素认证等。系统需要支持百万级用户并发访问，并提供良好的用户体验。';
                    modalRequirementBackground.textContent = '随着业务快速发展，现有用户管理系统已无法满足业务需求，存在性能瓶颈和功能缺失的问题。为提升用户体验，保障系统安全，并支持未来业务扩展，需要对用户管理系统进行全面重构。';
                    modalRequirementGoals.innerHTML = `
                        <li>性能提升：系统响应时间缩短50%，支持百万级用户并发访问</li>
                        <li>功能增强：增加用户权限精细化控制、多因素认证、单点登录等功能</li>
                        <li>安全加固：符合等保三级要求，防止常见的安全漏洞</li>
                        <li>可扩展性：支持微服务架构，便于未来功能扩展</li>
                        <li>用户体验：优化操作流程，提升用户满意度</li>
                    `;
                }
                
                // 显示弹窗
                requirementModalOverlay.classList.remove('hidden');
                document.body.style.overflow = 'hidden'; // 阻止背景滚动
            }
            
            // 关闭创建需求弹窗
            function hideCreateRequirementModal() {
                createRequirementModalOverlay.classList.add('hidden');
                document.body.style.overflow = 'auto'; // 恢复背景滚动
            }
            
            // 显示创建需求弹窗
            function showCreateRequirementModal() {
                createRequirementModalOverlay.classList.remove('hidden');
                document.body.style.overflow = 'hidden'; // 阻止背景滚动
            }
            
            // 点击需求卡片显示详情
            requirementCards.forEach(card => {
                card.addEventListener('click', function() {
                    const requirementId = this.getAttribute('data-id');
                    showRequirementModal(requirementId);
                });
            });
            
            // 关闭需求详情弹窗事件监听
            closeRequirementModal.addEventListener('click', hideRequirementModal);
            closeModalBtn.addEventListener('click', hideRequirementModal);
            requirementModalOverlay.addEventListener('click', function(e) {
                if (e.target === requirementModalOverlay) {
                    hideRequirementModal();
                }
            });
            
            // 创建需求按钮点击事件
            createRequirementBtn.addEventListener('click', showCreateRequirementModal);
            
            // 关闭创建需求弹窗事件监听
            closeCreateModal.addEventListener('click', hideCreateRequirementModal);
            cancelCreateBtn.addEventListener('click', hideCreateRequirementModal);
            createRequirementModalOverlay.addEventListener('click', function(e) {
                if (e.target === createRequirementModalOverlay) {
                    hideCreateRequirementModal();
                }
            });
            
            // 提交创建需求表单
            submitCreateBtn.addEventListener('click', function() {
                // 这里简化处理，实际应用中应该进行表单验证和提交
                alert('需求创建成功！');
                hideCreateRequirementModal();
            });
            
            // Tab标签页切换功能
            const tabs = document.querySelectorAll('.requirement-tab');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetId = this.id.replace('tab-', 'content-');
                    
                    // 移除所有active样式
                    tabs.forEach(t => {
                        t.classList.remove('active', 'border-primary', 'text-primary');
                        t.classList.add('border-transparent', 'text-gray-600');
                    });
                    
                    // 添加当前active样式
                    this.classList.add('active', 'border-primary', 'text-primary');
                    this.classList.remove('border-transparent', 'text-gray-600');
                    
                    // 隐藏所有内容
                    tabContents.forEach(content => {
                        content.classList.add('hidden');
                    });
                    
                    // 显示当前内容
                    const targetContent = document.getElementById(targetId);
                    if (targetContent) {
                        targetContent.classList.remove('hidden');
                    }
                });
            });
            
            // 分行类型切换功能
            const branchTypeRadios = document.querySelectorAll('.branch-type-radio');
            branchTypeRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    const branchType = this.value;
                    console.log('切换到分行' + branchType + '类');
                    // 这里可以根据需要动态调整表单字段
                });
            });
            
            // 按ESC键关闭弹窗
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    hideRequirementModal();
                    hideCreateRequirementModal();
                }
            });
        });
    </script>
</body>
</html>